
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
    <base href="<%=path%>">
    <title>Title</title>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript">
        $(function () {
            //获取交易的统计图表
            getCharts();
        })

        function getCharts() {
            // 基于准备好的dom，初始化echarts实例
            var myChart =echarts.init(document.getElementById('main'));
            //初始化other的dom柱状图echarts实例
            var otherChart=echarts.init(document.getElementById("other"));
            //后台请求拿到阶段以及每个阶段的记录条数
            var name="";
            $.ajax({
                url:"workbench/tran/getTranStageAndCount.do",
                type:"get",
                dataType:"json",
                success:function (resp) {
                    // 指定图表的配置项和数据,漏斗图
                    var option1 = {
                        title: {
                            text: '交易漏斗图',
                            subtext: '统计交易阶段数量的漏斗图'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c}%'
                        },
                        toolbox: {
                            feature: {
                                dataView: { readOnly: false },
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        legend: {
                            data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
                        },
                        series: [
                            {
                                name: 'Funnel',
                                type: 'funnel',
                                left: '10%',
                                top: 60,
                                bottom: 60,
                                width: '80%',
                                min: 0,
                                max: resp.title,
                                minSize: '0%',
                                maxSize: '100%',
                                sort: 'descending',
                                gap: 2,
                                label: {
                                    show: true,
                                    position: 'inside'
                                },
                                labelLine: {
                                    length: 10,
                                    lineStyle: {
                                        width: 1,
                                        type: 'solid'
                                    }
                                },
                                itemStyle: {
                                    borderColor: '#fff',
                                    borderWidth: 1
                                },
                                emphasis: {
                                    label: {
                                        fontSize: 20
                                    }
                                },
                                data: resp.dataList/* [
                            { value: 60, name: 'Visit' },
                            { value: 40, name: 'Inquiry' },
                            { value: 20, name: 'Order' },
                            { value: 80, name: 'Click' },
                            { value: 100, name: 'Show' }
                        ]*/
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示漏斗图表。
                    myChart.setOption(option1);
                    //显示柱状图
                    var option2 = {
                        title: {
                            text: '交易柱状图',
                            subtext: '统计交易柱状图',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: 'Access From',
                                type: 'pie',
                                radius: '50%',
                                data: resp.dataList,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    otherChart.setOption(option2);
                }
            })
        }
    </script>
</head>
<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width:600px;height:400px;"></div>
    <%--准备柱状图的dom--%>
    <div id="other" style="width: 600px;height: 400px"></div>
</body>
</html>
